{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<form method="GET" id="datePicker">
    <input type="hidden" name="startDate" value="{{start_date.isoformat}}" id="startDate">
    <input type="hidden" name="endDate" value="{{end_date.isoformat}}" id="endDate">
</form>
<input type="input" id="rangePicker" placeholder="Date range" class="input ~neutral !low bg-neutral-000 cursor-pointer" style="max-width: 200px;" readonly>
<style>
    :root {
        --litepicker-button-prev-month-color-hover: var(--color-urge);
        --litepicker-button-next-month-color-hover: var(--color-urge);
        --litepicker-day-color-hover: var(--color-urge);
        --litepicker-is-today-color: var(--color-urge);
        --litepicker-is-in-range-color: var(--color-urge-normal-fill);
        --litepicker-is-start-color-bg: var(--color-urge);
        --litepicker-is-end-color-bg: var(--color-urge);
        --litepicker-button-apply-color-bg: var(--color-urge);
    }

    .litepicker .container__predefined-ranges, .litepicker .container__months {
        box-shadow: var(--fallback-box-shadow-normal) !important;
    }
</style>
<script>
    function getLocaleDateString(locale) {
        const formats = {
            'de': "DD. MMM YY",
            'zh_TW': "YYYY 年 MM 月 DD 日"
        }
        return formats[locale] || "MMM DD 'YY";
    }

    let locale = "{{ LANGUAGE_CODE }}";
    let picker = new Litepicker({
        element: document.getElementById('rangePicker'),
        plugins: ['ranges'],
        singleMode: false,
        lang: locale,
        format: getLocaleDateString(locale),
        maxDate: new Date(),
        startDate: Date.parse(document.getElementById("startDate").getAttribute("value")),
        endDate: Date.parse(document.getElementById("endDate").getAttribute("value")),
        ranges: {
            customRanges: {
                {% for date_range in date_ranges %}
                    '{{ date_range.name }}': [
                        new Date('{{ date_range.start.isoformat }}'),
                        new Date('{{ date_range.end.isoformat }}')
                    ],
                {% endfor %}
            }
        }
    });
    picker.on('selected', (startDate, endDate) => {
        document.getElementById("startDate").setAttribute("value", startDate.getFullYear() +
            "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
        document.getElementById("endDate").setAttribute("value", endDate.getFullYear() + "-" +
            (endDate.getMonth() + 1) + "-" + endDate.getDate());
        document.getElementById("datePicker").submit();
    });
</script>
